<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>{if $isInAppWebview}装备合辑{else}{$set['name']}{/if}</title>
    <link rel="stylesheet" href="/static/css/show/set.css"/>
    <style>
        *{font-size: 100%;}
        .content {
            float: left;
            width: 100%;
            background: #F2F2F2;
        }

        .main {
            width: 100%;
            max-width: 640px;
            margin: 0 auto;
        }

        .line {
            clear: both;
            height: 10px;
        }

        /*list*/
        .view {
            float: left;
            width: 47%;
            margin: 10px 2%;
        }

        /*left*/
        .view_left {
            margin-right: 1%;
        }

        /*right*/
        .view_right {
            margin-left: 1%;
        }

        /*item*/
        .view .item {
            background: #FFFFFF;
            margin-bottom: 4%;
            padding: 4%;;
        }

        /*thumb*/
        .item_thumb {
            width: 100%;
            overflow: hidden;
        }

        .item_thumb img {
            width: 100%;
        }

        /*start*/
        .item_start em {
            display: inline-block;
            width: 17px;
            max-width: 17px;
            height: 16px;
            background: url("/static/images/img_start.png") no-repeat 0 0;
            background-size: 85px 32px;
            overflow: hidden;
        }

        /*start*/
        .item_start .start {
            background-position: 0 0;
        }

        .item_start .unstart {
            background-position: 0 -17px;
        }

        /*name*/
        .item_title, .item_count_img {
            color: #4b4b4b;
        }

        .item_title {
            width: 100%;
            overflow: hidden;
            word-break:break-all;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
        }

        /*description*/
        .item_description1 {
            background: #FFFFFF;
            line-height: 16px;
            color: #aaa;
            padding:15px;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
        }

        .item_count_text {}

        .item_description {
            background: #FFFFFF;
            line-height: 1.4;
            color: #b4b4b4;
            max-height: 70px;
            overflow: hidden;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
        }

        /*count*/
        .item_count_text em {
            color: #1aa5c3;
        }

        .item_count_img em {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background: url("/static/images/heart.png") no-repeat 0 0;
            background-size: 40px 20px;
         }
        .item_count_img em:before { 
        position: absolute; width: 30px; height: 30px; content: ''; left: -6px; top: -9px;
        background: rgba(0,0,0,.3); border-radius: 50%; z-index: 1;
        }
        .item_count_img .heart {
            background-position:-18px;
        }

        .item_count_img .comment {
            background-position: 0 -20px;
        }

        .item_count_img span {
            float: left;
            margin-right: 10px;
        }

        /*comment*/
        .item_comment {
            display: inline-block;
            width: 108%;
            margin-left: -4%;
            border-top: 1px solid #f2f2f2;
        }

        .item_avatar {
            float: left;
            width: 32%;
            margin: 0 4%;
            max-width: 80px;
            border-radius: 41px;
            height: 80px;
            overflow: hidden;
        }

        .item_info {
            float: left;
            width: 52%;
            margin: 0 4%;
        }

        .item_name, .item_date {
            margin-top: 32px;
            line-height: 40px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .item_name {
            color: #1aa5c3;
        }

        .item_date {
            color: #b4b4b4;
        }

        .header {
            background: url('{$set['img']}') no-repeat top center;
            background-size: 100%;
            color: #FFFFFF;
            height:200px;
        }

        .header .item_avatar, .header .item_info {
            float: left;
            margin: 132px 20px 20px 20px;
        }

        .header .item_count_img {
            float: right;
            padding: 165px 20px 0 0;
        }

        .header .item_name, .header .item_date {
            color: #FFFFFF;
        }

        .header .item_description {
            padding: 20px;
        }
    </style>
    <link rel="stylesheet" href="/static/css/show/index.css"/>
</head>
<body>
<div class="content">
    <div class="main">
        <div class="header">
            <div class="item_info">
                <div class="item_name">
                   {$set['name']}
                </div>
            </div>
            <div class="item_count_img">
                <em class="lover{if $set['is_like']} heart{/if}" data-id='{$set['gearId']}'></em>
            </div>            
        </div>
        <div class="item_description1">
            {$set['shortDesc']}              
        </div>
        <div class="list">
            <div class="view view_left">
                {loop $left $k $v}
                <div class="item view_item gear" data-id='{$v['gearId']}'>
                    <a href="{if $isInAppWebview}joggers://gearShoe/{$v['gearId']}{else}/show/gearInfo?gearId={$v['gearId']}{/if}">
                    <p class="item_thumb">
                        <img src="{$v['img']}" alt=""/>
                    </p>
                    <div class="line"></div>
                    <p class="item_start" >
                    {eval for($i=0;$i<5;$i++):}{if $i<round($v['score'])}<em class="start"></em>{else}<em class="unstart"></em>{/if}{eval endfor;}    
                    </p>

                    <div class="line"></div>
                    <p class="item_title">
                        $v['name']
                    </p>

                    <div class="line"></div>
                    <p class="item_description">{$v['shortDesc']}</p>
                    <div class="line"></div>
                    <p class="item_count_text">
                        <span><em>想要</em>({$v['likes']})</span>
                        <span><em>拥有</em>({$v['possess']})</span>
                    </p>
                    <div class="line"></div>
                    </a>
                </div>
                {/loop}
                 <div class="line"></div>                
            </div>
            <div class="view view_right">
                {loop $right $k $v}
                <div class="item view_item gear">
                    <a href="{if $isInAppWebview}joggers://gearShoe/{$v['gearId']}{else}/show/gearInfo?gearId={$v['gearId']}{/if}">
                    <p class="item_thumb">
                        <img src="{$v['img']}" alt=""/>
                    </p>

                    <div class="line"></div>
                    <p class="item_start">                          
                    {eval for($i=0;$i<5;$i++):}{if $i<round($v['score'])}<em class="start"></em>{else}<em class="unstart"></em>{/if}{eval endfor;}    
                    </p>

                    <div class="line"></div>
                    <p class="item_title">
                        $v['name']
                    </p>

                    <div class="line"></div>
                    <p class="item_description">{$v['shortDesc']}</p>

                    <div class="line"></div>
                    <p class="item_count_text">
                        <span><em>想要</em>({$v['likes']})</span>
                        <span><em>拥有</em>({$v['possess']})</span>
                    </p>
                    <div class="line"></div>
                    </a>
                </div>
                {/loop}
             
                <div class="line"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/js/TouchSlide.1.1.js"></script>
<script src="/static/js/zepto.1.0.min.js"></script>
{if $isInAppWebview}
<script>
    $('.lover').on('click', function(){
        var sid = $(this).attr('data-id');
        var obj = this;

        $.ajax({
            data:{sid: sid},
            url:'/show/setLike',
            type:'post',
            success:function(res){
                if(res == 1){
                    $(obj).addClass('heart');
                } else if(res == 2) {
                    $(obj).removeClass('heart');
                }else if(res == -1) {
                    location.href="joggers://login/";
                }
            }
        })
    });
</script>
{/if}
<script type="text/javascript">
    // Weixin
    var newsUrl = window.location.href;
    var iconUrl = "{$set['img']}";
    var dataForWeixin={
        appId:"",
          TLImg: iconUrl,
          url: newsUrl,
          title: "{$set['name']}",
          desc:"{$set['shortDesc']}",
          fakeid:"",
          callback:function(){}
    };
    (function() {
        var onBridgeReady=function() {
        WeixinJSBridge.on('menu:share:timeline', function(argv) {
        (dataForWeixin.callback)();
            WeixinJSBridge.invoke('shareTimeline', {
                "img_url":dataForWeixin.TLImg,
                "img_width":"120",
                "img_height":"120",
                "link":dataForWeixin.url,
                "desc":dataForWeixin.desc,
                "title":dataForWeixin.title
                }, function(res){});
            });
        };
        if(document.addEventListener) {
           document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if(document.attachEvent) {
           document.attachEvent('WeixinJSBridgeReady',onBridgeReady);
           document.attachEvent('onWeixinJSBridgeReady',onBridgeReady);
        }
    })();
</script>
{template 'show/web-footer'}
